<template>
  <div class="jxjyalllbox">
    <div class="sp_box">
      <div class="sp_title">
        <div class="sp_title_t">
          <div
            class="sp_title_xz"
            v-for="(item, index) in xzlist"
            :key="index"
            v-on:click="togglexz(index, item.value)"
            :class="{ sp_title_xz_active: activexz == index }"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="sp_title_b">
          <div
            class="sp_title_b_item"
            v-for="(item, index) in xzlist_r"
            :key="index"
          >
            <div v-if="index == 0" @click="clean()">综合排序</div>

            <el-dropdown
              @command="handleClick($event, index)"
              trigger="click"
              v-if="index > 0"
            >
              <span class="el-dropdown-link">
                {{ item.name }}
                <i
                  class="el-icon-arrow-down el-icon--right"
                  v-if="item.list.length > 0"
                ></i>
              </span>
              <el-dropdown-menu slot="dropdown" v-if="item.list.length > 0">
                <el-dropdown-item
                  v-for="(element, i) in item.list"
                  :key="i"
                  :command="element"
                >
                  {{ element.name }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
      <div class="sp_nr_box">
        <div
          class="sp_nr_box_item"
          v-for="(item, index) in splist"
          :key="index"
          @click="tz(item.id)"
        >
          <div class="sp_nr_imgbox" :data-content="item.type_name">
            <img :src="$self.imgurl(item.image)" alt="" />
          </div>
          <div class="zj_box">
            <div class="zj_box_title">{{ item.name }}</div>
            <div class="zj_box_zj">
              <div class="ls">授课老师：{{ item.teacher_name }}</div>
              <div class="ks">{{ item.class_hour }}课时</div>
            </div>
          </div>
          <div class="zj_box_button">
            <div class="xx">学习进度：{{ item.schedule }}%</div>
            <div class="zj_button" @click="tz(item.id)" v-if="item.status == 0">
              未学习
            </div>
            <div class="zj_button" @click="tz(item.id)" v-if="item.status == 1">
              继续学习
            </div>
            <div class="zj_button" @click="tz(item.id)" v-if="item.status == 2">
              已完成
            </div>
          </div>
        </div>
        <div
          class="sp_nr_box_item"
          v-for="(item, index) in 3"
          :key="index + 12"
          style="
            height: 0;
            margin: 0;
            padding: 0;
            min-height: 0;
            box-shadow: 1px 1px 3px 2px rgb(0 0 0 / 0);
          "
        ></div>
      </div>
      <div class="pagination_hy">
        <el-pagination
          hide-on-single-page
          background
          :pager-count="5"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      activexz: 0, //导航下标，默认全部

      xzlist: [
        {
          value: "",
          name: "全部",
        },
        {
          value: "0",
          name: "未完成",
        },
        {
          value: "1",
          name: "已完成",
        },
      ],
      status: "", //左侧选择的数据

      xzlist_r: [
        {
          value: "0",
          name: "综合排序",
          list: [],
        },
        {
          value: "1",
          name: "课程类型",
          list: [],
        },
        {
          value: "2",
          name: "课程年份",
          list: [],
        },
      ],
      year_id: "", //年份id
      type_id: "", //类型id

      splist: [], //视频列表
      total: 0,
      currentPage: 1,
    };
  },
  mounted() {
    this.getclass();
    this.getyear();
    this.getinfo();
  },
  methods: {
    /**
     * 左侧选择切换
     * @param {下标} e
     * @param {传的id} value
     */
    togglexz(e, value) {
      this.activexz = e;
      if (this.status != value) {
        this.status = value;
        this.currentPage = 1;
        this.getinfo();
      }
    },
    /**
     * 获取课程类型
     */
    getclass() {
      let that = this;
      let data = {};
      that.$http.post("education/type_list", data).then((res) => {
        if (res.code === 1) {
          that.xzlist_r[1].list = res.data;
        } else {
          that.xzlist_r[1].list = [];
        }
      });
    },
    /**
     * 获取年份
     */
    getyear() {
      let that = this;
      let data = {};
      that.$http.post("education/year_list", data).then((res) => {
        if (res.code === 1) {
          that.xzlist_r[2].list = res.data;
        } else {
          that.xzlist_r[2].list = [];
        }
      });
    },
    /**
     * 右侧选择
     * @param {*} command
     * @param {*} i
     */
    handleClick(command, i) {
      // console.log(command, i);
      this.xzlist_r.forEach((item, index) => {
        if (i == index) {
          item.name = command.name;
        }
      });
      if (i == 1) {
        if (this.type_id != command.id) {
          this.type_id = command.id;
          this.currentPage = 1;
          this.getinfo();
        }
      }
      if (i == 2) {
        if (this.year_id != command.id) {
          this.year_id = command.id;
          this.currentPage = 1;
          this.getinfo();
        }
      }
    },
    clean() {
      this.xzlist_r.forEach((item, index) => {
        if (index == 1) {
          item.name = "课程类型";
        }
        if (index == 2) {
          item.name = "课程年份";
        }
      });
      if (this.type_id != "" || this.year_id != "") {
        this.type_id = "";
        this.year_id = "";
        this.currentPage = 1
        this.getinfo();
      }
    },
    /**
     * 分页
     * @param {页码} page
     */
    handleCurrentChange(page) {
      // 当分页发生变化时的处理函数
      this.currentPage = page;
      this.getinfo();
    },
    /**
     * 获取视频列表
     */
    getinfo() {
      let that = this;
      let data = {
        type_id: that.type_id,
        year_id: that.year_id,
        page: that.currentPage,
        size: 8,
        status: that.status,
      };
      that.$http.post("education/myclass_list", data).then((res) => {
        if (res.code === 1) {
          that.total = res.data.total;
          that.splist = res.data.data;
        } else {
          that.total = 0;
          that.splist = [];
        }
      });
    },

    tz(e) {
      this.$router.push({ path: "/spbf", query: { id: e } });
    },
    //  ==
  },
};
</script>
  <style scoped>
.jxjyalllbox {
  margin: 0.01rem 0.625rem;
  width: 14.5rem;
}
.sp_box {
  background: #ffffff;
  border-radius: 0.125rem;
  box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.15);
  padding-bottom: 0.4875rem;
  margin-bottom: 0.1rem;
}
.sp_title {
  padding: 0.2875rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 0.025rem solid #1954a4;
}
.sp_title_t {
  display: flex;
}
.sp_title_xz {
  font-size: 0.2rem;
  font-weight: 400;
  color: #333333;
  margin-right: 0.6rem;
  cursor: pointer;
  display: flex;
}
.sp_title_xz:nth-child(4) {
  margin-right: 0.064rem !important;
}

.sp_title_xz_active {
  position: relative;
  color: #1954a4;
}
.sp_title_xz_active::after {
  content: "";
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0.17rem;
  height: 0.025rem;
  background: #1954a4;
}
.sp_nr_box {
  padding: 0.25rem 0.25rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.sp_nr_box_item {
  width: 3.375rem;
  min-height: 3.3rem;
  margin-bottom: 0.325rem;
  background: #f6f9fc;
  border-radius: 0.075rem;
  box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.1);
  font-size: 0.15rem;
  font-weight: 400;
  color: #7c7c7c;
}
.sp_nr_imgbox {
  height: 1.9125rem;
  border-radius: 0.075rem 0.075rem 0px 0px;
  position: relative;
}
.sp_nr_imgbox img {
  width: 100%;
  height: 100%;
  border-radius: 0.075rem 0.075rem 0px 0px;
}
/* .sp_nr_imgbox::after {
  content: attr(data-content);
  position: absolute;
  right: 0px;
  top: 0px;
  width: 0.625rem;
  height: 0.25rem;
  background: #1954a4;
  border-radius: 0px 0.075rem 0px 0px;
  text-align: center;
  font-size: 0.175rem;
  font-weight: 400;
  color: #ffffff;
} */
.zj_box {
  border-bottom: 1px solid #e6e6e6;
  width: 94%;
  margin: auto;
}
.zj_box_title {
  font-size: 0.2rem;
  font-weight: 400;
  color: #333333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0.15rem 0;
}
.zj_box_zj {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.175rem;
  width: 95%;
}
.ks {
  width: 0.9rem;
  height: 0.3rem;
  background: #e4edfd;
  border-radius: 0.1125rem;
  font-size: 0.175rem;
  font-weight: 400;
  color: #1954a4;
  text-align: center;
  line-height: 0.3rem;
}
.zj_box_button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.135rem;
}
.zj_button {
  width: 1.125rem;
  height: 0.3425rem;
  background: #1954a4;
  border-radius: 0.1875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.2rem;
  font-weight: 400;
  color: #ffffff;
}
.zj_button:hover {
  background: #4475b9;
}
.sp_title_b {
  font-size: 0.2rem;
  font-weight: 400;
  color: #333333;
  display: flex;
}
.sp_title_b_item {
  margin-left: 0.4875rem;
  cursor: pointer;
  min-width: 1.125rem;
}
.el-dropdown-link {
  font-size: 0.2rem;
  font-weight: 400;
  color: #333333;
  cursor: pointer;
}
</style>